<template>
  <view class="calendar-container">
    <!-- 头部标题和导航 -->
    <view class="calendar-header">
      <view class="header-nav">
        <view class="nav-btn" @click="prevMonth">
          <text class="iconfont icon-left">&lt;</text>
        </view>
        <view class="nav-date">{{ currentYear }}年{{ currentMonth }}月</view>
        <view class="nav-btn" @click="nextMonth">
          <text class="iconfont icon-right">&gt;</text>
        </view>
        <view class="today-btn" @click="backToToday">回到今天</view>
      </view>
    </view>
    
    <!-- 星期标题 -->
    <view class="week-days">
      <view class="week-day" :class="{ weekend: index === 0 || index === 6 }" v-for="(day, index) in weekDays" :key="index">
        {{ day }}
      </view>
    </view>
    
    <!-- 日历主体 -->
    <view class="calendar-grid">
      <!-- 上个月的日期 -->
      <view class="calendar-day prev-month" v-for="(day, index) in prevMonthDays" :key="'prev-' + index">
        <text class="solar">{{ day.solar }}</text>
        <text class="lunar">{{ day.lunar }}</text>
      </view>
      
      <!-- 当月的日期 -->
      <view 
        class="calendar-day current-month" 
        v-for="(day, index) in currentMonthDays" 
        :key="'current-' + index"
        :class="{ 
          today: day.isToday,
          weekend: day.weekday === 0 || day.weekday === 6,
          selected: day.isSelected
        }"
        @click="selectDate(day)"
      >
        <text class="solar">{{ day.solar }}</text>
        <text class="lunar">{{ day.lunar }}</text>
        <view class="dot" v-if="day.hasDot"></view>
      </view>
      
      <!-- 下个月的日期 -->
      <view class="calendar-day next-month" v-for="(day, index) in nextMonthDays" :key="'next-' + index">
        <text class="solar">{{ day.solar }}</text>
        <text class="lunar">{{ day.lunar }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    // 是否插入模式
    insert: {
      type: Boolean,
      default: false
    },
    // 是否显示农历
    lunar: {
      type: Boolean,
      default: false
    },
    // 开始日期
    startDate: {
      type: String,
      default: ''
    },
    // 结束日期
    endDate: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      // 星期标题
      weekDays: ['日', '一', '二', '三', '四', '五', '六'],
      // 当前显示的年月
      currentYear: new Date().getFullYear(),
      currentMonth: new Date().getMonth() + 1,
      // 选中的日期
      selectedDate: null,
      // 日历数据
      prevMonthDays: [],
      currentMonthDays: [],
      nextMonthDays: []
    };
  },
  watch: {
    currentYear() {
      this.generateCalendar();
    },
    currentMonth() {
      this.generateCalendar();
    }
  },
  mounted() {
    // 初始化日历
    this.generateCalendar();
    // 设置今天为选中日期
    const today = new Date();
    this.selectedDate = {
      year: today.getFullYear(),
      month: today.getMonth() + 1,
      day: today.getDate()
    };
  },
  methods: {
    // 生成日历数据
    generateCalendar() {
      // 获取当前月的天数
      const daysInMonth = new Date(this.currentYear, this.currentMonth, 0).getDate();
      // 获取当月第一天是星期几 (0-6)
      const firstDayOfWeek = new Date(this.currentYear, this.currentMonth - 1, 1).getDay();
      
      // 清空之前的数据
      this.prevMonthDays = [];
      this.currentMonthDays = [];
      this.nextMonthDays = [];
      
      // 生成上个月的日期
      const prevMonth = this.currentMonth === 1 ? 12 : this.currentMonth - 1;
      const prevYear = this.currentMonth === 1 ? this.currentYear - 1 : this.currentYear;
      const daysInPrevMonth = new Date(prevYear, prevMonth, 0).getDate();
      
      for (let i = 0; i < firstDayOfWeek; i++) {
        const day = daysInPrevMonth - firstDayOfWeek + i + 1;
        this.prevMonthDays.push({
          solar: day,
          lunar: this.getLunar(prevYear, prevMonth, day),
          weekday: i
        });
      }
      
      // 生成当月的日期
      const today = new Date();
      const isCurrentMonth = today.getFullYear() === this.currentYear && 
                             today.getMonth() + 1 === this.currentMonth;
      
      for (let i = 1; i <= daysInMonth; i++) {
        const weekday = new Date(this.currentYear, this.currentMonth - 1, i).getDay();
        const isToday = isCurrentMonth && today.getDate() === i;
        const isSelected = this.selectedDate && 
                          this.selectedDate.year === this.currentYear &&
                          this.selectedDate.month === this.currentMonth &&
                          this.selectedDate.day === i;
        
        // 模拟一些有标记的日期
        const hasDot = [7, 15, 22].includes(i);
        
        this.currentMonthDays.push({
          solar: i,
          lunar: this.getLunar(this.currentYear, this.currentMonth, i),
          weekday,
          isToday,
          isSelected,
          hasDot,
          year: this.currentYear,
          month: this.currentMonth
        });
      }
      
      // 生成下个月的日期
      const remainingDays = 42 - (this.prevMonthDays.length + this.currentMonthDays.length);
      for (let i = 1; i <= remainingDays; i++) {
        const nextMonth = this.currentMonth === 12 ? 1 : this.currentMonth + 1;
        const weekday = new Date(this.currentYear, this.currentMonth, i).getDay();
        
        this.nextMonthDays.push({
          solar: i,
          lunar: this.getLunar(
            this.currentMonth === 12 ? this.currentYear + 1 : this.currentYear,
            nextMonth,
            i
          ),
          weekday
        });
      }
    },
    
    // 切换到上一个月
    prevMonth() {
      if (this.currentMonth === 1) {
        this.currentMonth = 12;
        this.currentYear--;
      } else {
        this.currentMonth--;
      }
    },
    
    // 切换到下一个月
    nextMonth() {
      if (this.currentMonth === 12) {
        this.currentMonth = 1;
        this.currentYear++;
      } else {
        this.currentMonth++;
      }
    },
    
    // 回到今天
    backToToday() {
      const today = new Date();
      this.currentYear = today.getFullYear();
      this.currentMonth = today.getMonth() + 1;
      this.selectedDate = {
        year: this.currentYear,
        month: this.currentMonth,
        day: today.getDate()
      };
    },
    
    // 选择日期
    selectDate(day) {
      this.selectedDate = {
        year: day.year,
        month: day.month,
        day: day.solar
      };
      // 更新当前月份的选中状态
      this.currentMonthDays.forEach(item => {
        item.isSelected = item.solar === day.solar;
      });
      // 触发change事件
      this.$emit('change', {
        year: day.year,
        month: day.month,
        day: day.solar,
        lunar: day.lunar
      });
    },
    
    // 获取农历 (简化版实现)
    getLunar(year, month, day) {
      // 实际项目中建议使用成熟的农历库
      const lunarTerms = ['初一', '初二', '初三', '初四', '初五', '初六', '初七', '初八', '初九', '初十',
                         '十一', '十二', '十三', '十四', '十五', '十六', '十七', '十八', '十九', '二十',
                         '廿一', '廿二', '廿三', '廿四', '廿五', '廿六', '廿七', '廿八', '廿九', '三十'];
      
      // 这里只是简单模拟，实际应根据真实农历计算
      if (month === 4 && year === 2022) {
        const special = {7: '初七', 15: '十五', 22: '廿二'};
        return special[day] || lunarTerms[day - 1];
      }
      
      return lunarTerms[day - 1];
    }
  }
};
</script>

<style scoped>
.calendar-container {
  width: 100%;
  background-color: #fff;
  border-radius: 10px;
  overflow: hidden;
}

.calendar-header {
  background-color: #7B61FF;
  color: #fff;
  padding: 16px;
}

.header-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-btn {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-date {
  font-size: 16px;
}

.today-btn {
  font-size: 14px;
  background-color: rgba(255, 255, 255, 0.3);
  padding: 4px 10px;
  border-radius: 12px;
}

.week-days {
  display: flex;
  padding: 10px 0;
  border-bottom: 1px solid #eee;
}

.week-day {
  flex: 1;
  text-align: center;
  font-size: 14px;
  color: #666;
}

.week-day.weekend {
  color: #ff4d4f;
}

.calendar-grid {
  display: flex;
  flex-wrap: wrap;
}

.calendar-day {
  width: 14.2857%;
  height: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}

.calendar-day .solar {
  font-size: 16px;
  margin-bottom: 4px;
}

.calendar-day .lunar {
  font-size: 12px;
}

.prev-month, .next-month {
  color: #ccc;
}

.current-month {
  cursor: pointer;
}

.current-month.today {
  background-color: #E6E0FF;
}

.current-month.today .solar {
  color: #7B61FF;
  font-weight: bold;
}

.current-month.selected {
  background-color: #7B61FF;
  color: #fff;
}

.current-month.selected .solar,
.current-month.selected .lunar {
  color: #fff;
}

.current-month.weekend .solar {
  color: #ff4d4f;
}

.dot {
  width: 6px;
  height: 6px;
  background-color: #ff4d4f;
  border-radius: 50%;
  position: absolute;
  bottom: 8px;
}
</style>
